<template>
  <div class="login_box">
    <div class="login_l_img"><img :src="login_img" /></div>
    <div class="login">
      <div class="login_logo"><a href="#"><img :src="login_logo" /></a></div>
      <div class="login_name">
        <p>网关管理平台</p>
      </div>
      <el-form ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-row :gutter="15">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPasswd">
            <el-input v-model="form.userPasswd" placeholder="请输入密码" clearable show-password
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-row>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import {loginUser} from '../api/login_api'
import GLOBAL_FUN from "../api/global_function";


import login_img from "../assets/login/images/login-img.png";
import login_logo from "../assets/login/images/login_logo.png";

export default {
  data() {
    return {
      login_img: login_img,
      login_logo: login_logo,
      name:'login',
      form:{},
      rules: {
        userName: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        userPasswd: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      let _this = this;
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        loginUser(_this.form).then(function(result) {
          if (result) {
            _this.GLOBAL_FUN.successMsg();
            // 缓存token
            GLOBAL_FUN.setToken(result.data);
            _this.$router.push('/main');
          }
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
.login {height:360px; width:400px; padding:50px; background-color: #93defe;border-radius:6px;box-sizing: border-box; float:right; margin-right:50px; position:relative; margin-top:50px;}
.login_box{ width:1100px; margin:120px auto 0;}
.login_box .login_l_img{ float:left; width:432px; height:440px; margin-left:50px;}
.login_box .login_l_img img{width:500px; height:440px; }
.login_name{ width:100%; float:left; text-align:center; margin-top:20px;}
.login_name p{ width:100%; text-align:center; font-size:18px; color:#444; padding:10px 0 20px;}
.login_logo{ width:120px; height:120px; border:5px solid #93defe;border-radius:100px; background:#fff; text-align:center; line-height:110px; position:absolute; top:-60px; right:140px;}
.login_logo img{ width:60px; height:60px;display: inline-block; vertical-align: middle;}
</style>
